<template>
  <Category :scene="scene"></Category>

  <el-card style="margin: 10px 0">
    <!-- 场景0：展示已有的SPU数据 -->
    <div v-show="scene == 0">
      <el-button
        type="primary"
        icon="Plus"
        :disabled="!categoryStore.c3Id"
        @click="addSpu"
        >添加SPU</el-button
      >
      <el-table style="margin: 10px 0px" border :data="records" height="570">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spu_title"></el-table-column>
        <el-table-column
          label="SPU描述"
          prop="spu_desc"
          show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作">
          <!-- row：即为已有的SPU对象 -->
          <template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="添加SKU"
              @click="addSku(row)"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              icon="Edit"
              title="修改SPU"
              @click="updateSpu(row)"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="View"
              title="查看SPU"
              @click="findSku(row)"
            ></el-button>

            <el-popconfirm
              width="220"
              icon="InfoFilled"
              icon-color="#626AEF"
              :title="`是否确定删除--${row.spuName}?`"
              @confirm="deleteSpu(row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  title="删除SPU"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout=" prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="getHasSpu"
        @size-change="getHasSpu(1)"
      />
    </div>
    <!-- 场景1：添加SPU|修改SPU 组件 -->
    <spuForm ref="spu" v-show="scene == 1" @changeScene="changeScene"></spuForm>
    <!-- 场景2：添加SKU 组件 -->
    <skuForm ref="sku" v-show="scene == 2" @changeScene="changeScene"></skuForm>
    <!-- sku列表 对话框 -->
    <el-dialog title="SKU列表" v-model="show" width="55%">
      <el-table :data="skuArr" style="width: 100%" border>
        <el-table-column prop="skuName" label="SKU名称" align="center"></el-table-column>
        <el-table-column prop="price" label="SKU价格" align="center"></el-table-column>
        <el-table-column prop="weight" label="SKU重量" align="center"></el-table-column>
        <el-table-column label="SKU图片" align="center">
          <template #="{ row, $index }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.skuDefaultImg"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
// skuArr
import { ref, watch, onBeforeUnmount } from "vue";
import type {
  SkuData,
  HasSpuResponseData,
  Records,
  SpuData,
} from "@/api/product/spu/type";
import { reqHasSpu, reqSkuList, reqRemoveSpu } from "@/api/product/spu";
import { ElMessage } from "element-plus";
import useCategoryStore from "@/store/modules/category";

import spuForm from "./spuForm.vue";
import skuForm from "./skuForm.vue";

const clicked = ref(false);
function onCancel() {
  clicked.value = true;
}
const deleteSpu = async (row: SpuData) => {
  const res = await reqRemoveSpu(row.id as number);
  console.log(res);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功！",
    });
    getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1);
  } else {
    ElMessage({
      type: "error",
      message: "删除失败！",
    });
  }
};

let categoryStore = useCategoryStore();
// 存储已有SPU数据
let records = ref<Records>([]);
// 已有SPU总个数
let total = ref<number>(0);

let spu = ref<any>();
let sku = ref<any>();

let skuArr = ref<SkuData[]>([]);

const show = ref<boolean>(false);
const scene = ref(0); // 0：显示已有SPU   1：添加或修改SPU    2：添加SKU
// 分页器默认页码
const pageNo = ref<number>(1);
// 分页器默认一页几条数据
const pageSize = ref<number>(5);

watch(
  () => categoryStore.c3Id,
  () => {
    if (!categoryStore.c3Id) return;
    getHasSpu();
  }
);

// 此方法执行可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async (pager = 1) => {
  pageNo.value = pager;
  let res: HasSpuResponseData = await reqHasSpu(
    pageNo.value,
    pageSize.value,
    categoryStore.c3Id
  );
  if (res.code == 0) {
    records.value = res.data.records;
    total.value = res.data.total;
  }
};

const addSpu = () => {
  scene.value = 1;
  // 调用子组件的方法初始化数据
  spu.value.initAddSpu(categoryStore.c3Id);
};

const updateSpu = (row: SpuData) => {
  spu.value.initHasSpuData(row);
  scene.value = 1;
};

const addSku = (row: SpuData) => {
  scene.value = 2;
  sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
};

const findSku = async (row: SpuData) => {
  const res = await reqSkuList(row.id as number);
  console.log("显示sku列表", res);
  if (res.code == 200) {
    skuArr.value = res.data;
    show.value = true;
  }
};

// 子组件SpuForm绑定自定义事件：目前是让子组件通知父组件切换场景为0
const changeScene = (obj: any) => {
  // 子组件SpuForm点击取消变为场景0：展示已有的SPU
  const { flag, params } = obj;
  // console.log(flag, params, '切换场景')
  scene.value = flag;
  if (params == "update") {
    getHasSpu(pageNo.value);
  } else if (params == "add") {
    getHasSpu();
  }
};

// 路由组件销毁前，清空仓库关于分类的数据
onBeforeUnmount(() => {
  categoryStore.$reset();
});
</script>

<style scoped></style>
